<%--
  Created by IntelliJ IDEA.
  User: lishihong
  Date: 2022/3/22
  Time: 8:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px">
  <div v-for="(item, index) in form.dynamicItem" :key="index">
    <el-form-item
            label="姓名"
            :prop="'dynamicItem.' + index + '.name'"
            :rules="{
            required: true, message: '姓名不能为空', trigger: 'blur'
        }"
    >
      <el-input v-model="item.option"></el-input>
    </el-form-item>
    <el-form-item
            label="手机号"
            :prop="'dynamicItem.' + index + '.phone'"
            :rules="[
             {required: true, message: '手机号不能为空', trigger: 'blur'},
              { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
          ]"
    >
      <el-input v-model="item.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button v-if="index+1 == form.dynamicItem.length" @click="addItem" type="primary">增加</el-button>
      <el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">删除</el-button>
    </el-form-item>
  </div>
</el-form>

</body>
</html>
